import { GetLogDetail } from "@/components/form/log/get.log.detail"
import { FormModal } from "@/components/modal/form.modal"
import { Field_Reset, Field_Search, Field_keyword } from "@/components/utils/field.list"

import adminLogsService from "@/services/admin.logs.service"

import { StoreContext } from "@/store"
import ExclamationCircleFilled from "@ant-design/icons/ExclamationCircleFilled"
import { AsyncModal, IndexRender, BooleanRender, FormRender, ListTable, OperateRender, DateRender } from "@whzhuke/antd"
import { useMobx } from "@whzhuke/mobx"
import { useFetch } from "@whzhuke/usehook"
import { Button, Col, Modal, Row, Space, message } from "antd"
import { useForm } from "antd/es/form/Form"
import React, { useCallback, useContext } from "react"
const { confirm } = Modal
const Page = useMobx(() => {
  const [form] = useForm()
  const { ListStore } = useContext(StoreContext)
  const titleRender = useCallback(() => {
    return (
      <Row justify="space-between" align="middle">
        <Col>系统操作日志列表</Col>
      </Row>
    )
  }, [])
  const onReset = useCallback(() => ListStore.setParams(adminLogsService.list, {}), [])
  const onFinish = useCallback(data => ListStore.setParams(adminLogsService.list, data), [])
  const [{ data: requestMethodData }] = useFetch(adminLogsService.getRequestMethod, [{}])
  const LogDetailItem = useCallback(
    id => () => {
      AsyncModal({
        content: FormModal,
        params: {
          formEle: GetLogDetail,
          formProps: {
            logId: id
          },
          title: "日志详情"
        }
      })
    },
    []
  )

  return (
    <Row>
      <Col span={24}>
        <FormRender
          form={form}
          onReset={onReset}
          onFinish={onFinish}
          layout="inline"
          fieldList={[
            Field_keyword,
            {
              fieldType: "select",
              formItemConfig: { name: "method", label: "请求类型" },
              config: {
                placeholder: "全部",
                options: requestMethodData.map((v: { key: any; value: any }) => ({ label: v.key, value: v.value }))
              }
            },
            Field_Search,
            Field_Reset
          ]}
        />
      </Col>
      <Col span={24}>
        <ListTable
          title={titleRender}
          apiColumns={[
            IndexRender("id", 80),
            ["requestUri", "请求URI"],
            ["method", "请求方式"],
            ["ip", "请求IP"],
            ["businessId", "业务ID"],
            ["businessDesc", "业务描述"],
            ["logDesc", "日志描述"],
            ["createTs", "创建时间", DateRender()],
            ["creator", "操作人"],
            ["id", "操作", OperateRender([["查看详情", LogDetailItem]]), { width: 80, fixed: "right" }]
          ]}
          apiService={adminLogsService.list}
        />
      </Col>
    </Row>
  )
})

export default Page
